<template>
  <div>
    <div class="head" v-on:mouseleave="closemenu">
      <div class="warp">
        <!-- logo -->
        <div class="logo">
         <div class="logo_img">
           <img style="right:10px;position: relative" src="../assets/img/logo.jpg">
           <img style="border-radius: 100px;width: 35px;height: 35px;margin-top:18px;padding-left: 10px;"src="../assets/img/Head.png">
         </div>
          <h2>{{company}}</h2>
          <p class="machine image" @click="exitsubmit"><img  src="../assets/img/tu.png" alt=""><span>退出</span></p>
          <p class="markdown_">{{store}}/{{name}}（{{post}}）</p>
        </div>
        <!-- logo end -->
        <!-- head-right -->
        <ul class="head-right">
          <li><router-link to="/index" style="color:#fff"><img src="../assets/img/home.png"/>
            <div>首页</div></router-link>
            <div class="hidden_box"></div>
            <div class="hidden_box_Up"></div>
          </li>
          <li v-for="(item,index) in menu">
            <div v-on:mouseenter="showHouse(index)">
              <img :src="item.icon"/>
              <div>{{item.title}}</div>
            </div>
            <div  class="is_house" v-show="index === i">
              <img src="../assets/img/ta.png" alt="">
              <div>
                <div class="is_house_box" @click="goback(index)" v-for="children,index in menu[index].children">
                  <router-link :to="{name:children.router}">{{children.title}}</router-link>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- head-right end-->
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  import index from "../router";
  export default {
    props:{
      headClick:{
        type:Function
      }
    },
    data() {
      return {
        imgurl:'',
        isHouse: true,
        i :-1,
        company: '海南无忧网络科技有限公司',
        store: '门店',
        name: '姓名',
        post: '业务员',
        // nav: [
        //   {title: '首页', imgUrl: '../assets/img/home.png', url: "/"},
        // ],
        houses: [
          {name: '城市管理'},
          {name: '楼盘录入'},
          {name: '楼盘列表'},
          {name: '我的海报'},
          {name: '生成海报'},
          {name: '地图找房'},
          {name: '在售楼盘'},
          {name: '代理楼盘'},
        ],
        menu:[],
        // childrens:[]
      }
    },
    methods: {
      //退出
      exitsubmit(){
        localStorage.userinfo = '';
        localStorage.token = '';
        this.$router.push({name:'Login'})
      },
      showHouse(index) {
        if(this.i === -1){
          this.i = index
        }else {
          if(this.i === index){
            this.i = -1
          }else {
            this.i = index
          }
        }
        // console.log(this.i)
      },
      closemenu(){
        this.i = -1;
        // console.log(i)
      },
      goback(i){
        // console.log(i)
      },
      getMenu(){
        let that = this;
        if( that.$store.state.menus.length !== 0){
          that.menu = this.$store.state.menus;
          // console.log(localStorage.menus)
        }else {
          that.$http.get('/index/menu',{
          })
          .then(res => {
            // console.log(res.status);
            if (res.status === 200){
              this.$store.state.menus = eval(res.data);
              that.menu = res.data;
            } else {
                that.getMenu();
            }

          })
          .catch(err => {
            console.log(err);
          });
        }
      }
    },
    computed:{


    },
    created(){
      let that = this;
      that.getMenu();
      this.imgurl = '../assets/img/';
      let userinfo=localStorage.userinfo;
      userinfo = JSON.parse(userinfo);
      console.log(userinfo,'===============');
      this.name = userinfo.username;
      // this.post = '666';
      // 公司名字赋值
        this.company = userinfo.company.name;
        this.store = userinfo.store.title;
        this.post = userinfo.job.title;
    },
  }
</script>

<style scoped>
  .head-right {
    float: right;
    left: 18px;
    position: relative;
    background-color: #1590ed;
    height: 80px;
    width: 68%;
    cursor:pointer;
  }
.hidden_box{
  width:100px;
  height:133px;
  margin-top: -65px;
  right: 80px;
  position: relative;
  background-color:#3448a1;
  -webkit-clip-path:polygon(0% 60%,20% 0%,65% 0%,40% 60%);
}
.hidden_box_Up{
  width: 168px;
  height: 80px;
  margin-top: -131px;
  right: 84px;
  position: relative;
  background-color: #4768b5;
  -webkit-clip-path: polygon(34% 31%,35% 0,10% 10%,16% 16%);
  transform: rotate(15deg);
}
  .head-right li {
    float: left;
    left: 50px;
    width: 7.5%;
    padding-top: 18px;
    text-align: center;
    color: #ffffff;
    position: relative;
  }
  .head-right a{
    color: #000000;
  }
  .head {
    width: 100%;
    /*min-width:1360px; !*整体宽度*!*/
    height: 80px;
    background:#3448a1;
    background-size: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  .logo {
    margin-top: 10px;
    width: 20%;
    float: left;
    color: #ffffff;
  }
  .logo img {
    float: left;
    width: 128px;
    margin-right: 10px;
  }
  .logo_img{
    top: 0;
    left: -10px;
    position: absolute;
    height: 30%;
  }

  .logo h2 {
    font-size: 1rem;
    left: 189px;
    margin-bottom: 10px;
    position: relative;
  }

  /*楼盘管理*/
  .is_house {
    background: #eee;
    z-index: 999;
    color: black;
    position: absolute;
    /*height: 100%;*/
    width: 100%;
    top: 72px;
    left: 0;
  }
  .is_house a:hover{
    background-color: #ecedee;
  }
  .head-right img{
    height: 28px;
  }
  imgurl img a:hover{
    color: #FF0000;

  }
  .is_house>div{
    width: 100%;
    background: #fafafa;
    line-height: 30px;
    border: 1px solid #e1e1e2;
    box-shadow: 1px 0px 1px #e1e1e2;

  }
  .is_house_box{
    border-bottom: 1px solid #e1e1e2;
  }
  .is_house img{
    width: 15px;
    height: 7px;
    left: 42%;
    top: -6px;
    position: absolute;
  }
.machine{
  float: left;
  left: 325px;
  margin-top: 4px;
  position: relative;
  cursor:pointer;
}
  .machine span{
    font-size: 0.9rem;
  }
.image img{
  width: 17px;
  height: 17px;
}
  .markdown_{
    left: 188px;
    position: absolute;
    top: 43px;
    font-size: 0.9rem
  }
</style>
